{%- import "macros.html" as macros -%}
{# Jumping through hoops to get a relative path to the site root #}
{%- if current_path == "/" -%}
  {%- set_global rel_top = "." -%}
{%- else -%}
  {%- set_global rel_top_work = [] -%}
  {%- for _ignored in current_path | trim_end_matches(pat="/") | split(pat="/") | slice(start=1) -%}
    {%- set_global rel_top_work = rel_top_work | concat(with="..") -%}
  {%- endfor -%}
  {%- set_global rel_top = rel_top_work | join(sep="/") -%}
{%- endif -%}
<!DOCTYPE html>
<html lang="en" class="sidebar-visible">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <title>{% block title %}{{ config.title }}{% endblock title %}</title>
    <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    {% if config.extra.google_analytics_id %}
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ config.extra.google_analytics_id }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{{ config.extra.google_analytics_id }}');
    </script>
    {% endif %}

    <script>
      // Azure Storage static websites don't redirect directories to trailing
      // slashes: if the file `foo/bar/index.html` exists, requests to
      // `foo/bar` will be treated equivalent to `foo/bar/` and
      // `foo/bar/index.html`, even though this breaks relative URL
      // resolution. Zola only emits index.html files, so if we're being
      // loaded and our path doesn't look like one of the latter two forms, we
      // can be confident that we should redirect. There might be a flash of
      // broken content but it will hopefully be brief.
      if (window.location.pathname.indexOf("/", window.location.pathname.length - 1) === -1 &&
          window.location.pathname.indexOf(".html", window.location.pathname.length - 5) === -1) {
        window.location.pathname = window.location.pathname + "/";
      }
    </script>

    {% block js %}
    {% endblock js %}
    {% block css %}
    <link rel="stylesheet" href="{{ rel_top ~ '/wwtguide.css' | safe }}">
    <link rel="stylesheet" href="{{ rel_top ~ '/assets/font-awesome.min.css' | safe }}">
    {% if config.extra.stylesheets %}
    {% for stylesheet in config.extra.stylesheets %}
        <link rel="stylesheet" href="{{ rel_top ~ '/' ~ stylesheet | safe }}">
    {% endfor %}
    {% endif %}
    {% endblock css %}
    {% block extra_head %}
    {% endblock extra_head %}
  </head>

  <body>
    <!-- Hide / unhide sidebar before it is displayed -->
    <script type="text/javascript">
      var html = document.querySelector('html');

      // XXXX hardcoding break size. Also, note that we use this variable in
      // some inline JavaScript later in the file.
      var sidebar = (document.body.clientWidth < 1080) ? 'hidden' : 'visible';

      if (sidebar === 'hidden') {
        html.classList.remove('sidebar-visible');
        html.classList.add("sidebar-hidden");
      }
    </script>

    <!-- The sidebar -->
    <div id="sidebar" class="sidebar">
      <div class="sidebar-scrollbox">
        <!-- logo -->
        <a class="sidebar-logo" href="https://docs.worldwidetelescope.org/"></a>

        <!-- table of contents -->
        <details open>
          <summary>Table of Contents</summary>

          <nav role="navigation">
            <ul>
              <li>
                <a {% if current_path == "/" %}class="active"{% endif %}
                   href="{{ rel_top ~ '/' | safe }}">{{ config.title }}</a>

                <ul>
                  {% set index = get_section(path="_index.md") %}
                  {% if index.subsections %}
                    {% for ss_name in index.subsections %}
                    {% set ss = get_section(path=ss_name) %}
                    <li>
                      <a {% if current_path == ss.path %}class="active"{% endif %}
                         href="{{ rel_top ~ ss.path | safe }}">{{ ss.title }}</a>
                      {% if ss.pages %}
                      <ul>
                        {% for page in ss.pages %}
                        <li>
                          <a {% if current_path == page.path %}class="active"{% endif %}
                             href="{{ rel_top ~ page.path | safe }}">{{ page.title }}</a>
                        </li>
                        {% endfor %}
                      </ul>
                      {% endif %}
                    </li>
                    {% endfor %}
                  {% else %}
                    {% for page in index.pages %}
                    <li>
                      <a {% if current_path == page.path %}class="active"{% endif %}
                         href="{{ rel_top ~ page.path | safe }}">{{ page.title }}</a>
                    </li>
                    {% endfor %}
                  {% endif %}
                </ul>
              </li>
            </ul>
          </nav>
        </details>

        <hr/>

        <!-- "On this page" nav goes here if it's defined -->
        {% block cur_page_nav %}
        {% endblock cur_page_nav %}

        <!-- resources -->
        <details open>
          <summary>Resources</summary>

          <nav role="navigation">
            <ul>
              <li><a href="{{ config.extra.github_base | safe }}">GitHub Repository</a></li>
              <li><a href="https://docs.worldwidetelescope.org/">WWT Docs Home</a></li>
              <li><a href="https://worldwidetelescope.org/about/">About WWT</a></li>
            </ul>
          </nav>
        </details>

        <!-- footer -->
        <footer>
          Copyright {{ now() | date(format="%Y") }} WWT contributors. HTML generated
          with <a href="https://www.getzola.org/">Zola</a>.
        </footer>
      </div>
    </div>

    <!-- Main page -->
    <div id="page-wrapper" class="page-wrapper">
      <div class="page">
        <!-- Top menu bar -->
        <div id="menu-bar-hover-placeholder"></div>

        <div id="menu-bar" class="menu-bar sticky">
          <div class="left-buttons">
            <button id="sidebar-toggle" class="icon-button" type="button"
                    title="Toggle Sidebar" aria-label="Toggle Sidebar" aria-controls="sidebar">
              <i class="fa fa-bars"></i>
            </button>
          </div>

          <h1 class="menu-title">{{ config.title }}</h1>

          <div class="right-buttons">
            <a href="{{config.extra.github_base | safe}}" title="Git repository" aria-label="Git repository">
              <i id="git-repository-button" class="fa fa-github"></i>
            </a>
          </div>
        </div>

        <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
        <script type="text/javascript">
          document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
          document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
          Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
            link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
          });

          // Default to collapsing the nav categories in sidebar-hidden (~mobile) mode
          if (sidebar !== 'visible') {
            Array.from(document.querySelectorAll("#sidebar details")).forEach(function (d) {
              d.removeAttribute("open");
            });
          }
        </script>

        <!-- Actual content! -->
        <div id="content" class="content">
          <main>
            {% block content %}
            {% endblock content %}
          </main>
        </div>

        <!-- Prev/next links -->
        <div class="prev-link prevnext-link">
          {% block prev_link %}
          {% endblock prev_link %}
        </div>

        <div class="next-link prevnext-link">
          {% block next_link %}
          {% endblock next_link %}
        </div>
      </div>
    </div>

    {% block js_body %}
    <script type="text/javascript" src="{{ rel_top ~ '/assets/wwtguide.js' | safe }}"></script>
    {% endblock js_body %}
  </body>
</html>
